<template>
  <div>
    <!-- 加了小括号就代表自己要指定传参，$event代表事件对象 -->
    <!-- 对于原生标签而言，如果事件绑定的函数没加小括号，默认有参数，参数就是事件对象 -->
    <button @click="fn1">点我</button>
    <p>msg: {{ msg }}</p>

    <!-- 对于组件而言，如果事件绑定的函数没加小括号，默认有参数，参数就是子组件传递过来的值 -->
    <!-- <son @getMsg="fn2"/> -->
    <!-- 加了小括号就是代表自己指定传参，没传那就是undefined -->
    <!-- <son @getMsg="fn2()"/> -->
    <!-- 传的是$event，就代表传递默认参数，默认参数就是子组件传递过来的数据 -->
    <!-- <son @getMsg="fn2($event)"/> -->

    <!-- 直接把子组件传递过来的数据赋值给当前的msg变量 -->
    <son @getMsg="msg = $event"/>
  </div>
</template>

<script>
import son from './components/son'
export default {
  components: {
    son 
  },

  data() {
    return {
      msg: '',
    };
  },
  methods: {
    fn1 (e) {
      console.log(e) 
    },

    fn2 (data) {
      console.log('fn2',data)
    }
  }
}
</script>

<style>

</style>